<template>
<el-button class="Win10Metro">win10-样式2</el-button>
</template>

<script setup>
</script>

<style scoped>
button.Win10Metro {
  -webkit-transition: transform 0.4s, background 0.4s; /* Safari */
  transition: transform 0.4s, background 0.4s;
  font-size: 14px;
  background: #ddd;
  border: 2px solid #ddd;
  color: #000;
  padding: 4px 20px 4px 20px;
  font-family: "Segoe UI", "Webly Sleek UI", "Frutiger", "Lucida Sans Unicode",
  "Lucida Grande", "Open Sans", sans-serif;
}

button.Win10Metro:hover {
  -webkit-transition: transform 0.4s, background 0.4s; /* Safari */
  transition: transform 0.4s, background 0.4s;
  border-color: #888;
}

button.Win10Metro:active {
  -webkit-transition: transform 0s, background 0s; /* Safari */
  transition: transform 0s, background 0s;
  border-color: #888;
  background: #888;
  -ms-transform: scale(0.95, 0.95); /* IE 9 */
  -webkit-transform: scale(0.95, 0.95); /* Safari */
  transform: scale(0.95, 0.95);
}

</style>